<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试vue_v2_k1</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>
<div id="kzx1" >
    <p>{{msg}}</p>

</div>

</body>
<script>
    var vm= new Vue({
        el:"#kzx1",
        data:{
            msg:'测试vue的声明周期'
        },

        methods: {
            showKzx() {
                console.info('methods--showKzx被调用....');
            }
        },

        //这个阶段vue实例刚刚在内存中创建，此时data和methods这些都没初始化好。
        beforeCreate()  {
            show('vue实例创建之前', this)
        },
        //这个阶段vue实例在内存中已经创建好了，data和methods也能够获取到了，但是模板还没编译。
        created() {
            show('vue实例创建之后', this)
        },
        //这个阶段完成了模板的编译，但是还没挂载到页面上。
        beforeMount() {
            show('vue实例创建之后,挂载之前...', this)
        },
        //这个阶段，模板编译好了，也挂载到页面中了，页面也可以显示了。
        mounted() {
            show('vue实例创建之后,挂载之后...', this)
        },
        //这个阶段，data中数据的状态值已经更新为最新的，但是页面上显示的数据还是最原始的，还没有重新开始渲染DOM树。
        beforeUpdate() {
            show('vue实例创建之后,挂载之后,更新之前...', this)
        },
        //这个阶段，data中数据的状态值是最新的，而且页面上显示的数据也是最新的，DOM节点已经被重新渲染了。
        updated() {
            show('vue实例创建之后,挂载之后,更新之后...', this)
        },
        //这个阶段，处于vue实例被销毁之前，当然，这个阶段vue实例还能用。
        beforeDestroy() {
            show('vue实例创建之后,挂载之后,更新之后,销毁之前...', this)
        },
        // 这个阶段，在vue实例销毁后调用，此时所有实例指示的所有东西都会解除绑定，事件监听器也都移除，子实例也被销毁。
        destroyed() {
            show('vue实例创建之后,挂载之后,更新之后,销毁之后...', this)
        }

    });

    //更新data中的数据
    vm.msg = '测试vue生命周期-测试update'
    //对象销毁
    // vm.$destroy()

    // 各个生命周期函数通过调用下面这个函数了解其所处的生命阶段
    function show(inf,obj){
        console.log(inf);
        console.log('获取vue实例data里的数据：'+obj.msg);
        console.log('挂载的对象，就是DOM：' +obj.$el);
        console.log('页面上已经挂载的DOM：'+document.getElementById('kzx1').innerHTML);
        console.log("**********************************************************************");

    }

</script>

</html>
